<template>
    <rx-layout>
        <div slot="center">
            <a-form-model ref="form"  :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item :label="i18n('form.formScheme','表单方案')" prop="formAlias" >
                    <rx-input-button width="80%"  @click="selectForm" v-model="form.formAlias" ></rx-input-button>
                </a-form-model-item>
                <a-form-model-item :label="i18n('form.isReadOnly','是否只读')" prop="readOnly" >
                    <a-switch default-checked v-model="form.readOnly" />
                </a-form-model-item>
                <a-form-model-item :label="i18n('form.primaryKey','主键')" prop="pkField" >
                    <a-select style="width: 240px;" allowClear v-model="form.pkField"  :options="srcFields"/>
                </a-form-model-item>
                <a-form-model-item :label="i18n('form.colMap','列映射')">
                    <a-button-group class="addbutton">
                        <button @click="add()"><i class="iconfont iconadd"></i></button>
                        <button @click="remove()"><i class="iconfont icontrash"></i></button>
                        <button @click="moveUp()"><i class="iconfont iconshang"></i></button>
                        <button @click="moveDown()"><i class="iconfont iconxia"></i></button>
                    </a-button-group>
                    <a-table
                        :columns="columns"
                        :dataSource="fieldMap"
                        :pagination="false"
                        :bordered="true"
                        :rowSelection="{selectedRowKeys: selectedRowKeys,type:'checkbox', onChange: onSelectChange}"
                        rowKey="idx_"
                        style="width: 91.5%;"
                    >

                        <template slot="destField" slot-scope="text, record, index"  >
                            <a-select v-model="record.destField" :options="destFields" @change="changeDestField(record)"/>
                        </template>

                        <template slot="srcField" slot-scope="text, record, index"  >
                            <a-select show-search option-filter-prop="children" :filter-option="filterOption"
                                      @focus="fieldFocus(record)" @change="fieldChange($event,record)"
                                      v-model="record.srcField" :options="srcFields"/>
                        </template>

                    </a-table>
                </a-form-model-item>

                <a-form-model-item :label="i18n('form.callbackFun','回调方法')" prop="callback" >
                    <a-input style="width: 80%" v-model="form.callback"  />
                    <a-tooltip style="margin-left: 4px;">
                        <template slot="title">
                            <p>{{i18n('jsFunction','在PC端页面JS函数定义处编写js方法')}}</p>
                            <p>{{i18n('example','例如')}}:demo(row,self){}</p>
                            <p>{{i18n('rowAndSelf','row为当前行数据,self为当前对象')}}</p>
                        </template>
                        <a-icon type="question-circle" />
                    </a-tooltip>
                </a-form-model-item>

            </a-form-model>
        </div>
    </rx-layout>
</template>

<script>
import {BaseFormModel,GridMixin} from "@lowcode/jpaas-common-lib";
import DialogBox from "@/assets/js/DialogBox";
import FormSolutionApi from "@/api/form/core/formSolution";
import FormBoListApi from "@/api/form/core/formBoList";
export default {
    name: "renderConfig_openform",
    props:["layerid","destroy"],
    mixins: [BaseFormModel,GridMixin],
    data(){
        return {
            labelCol: {span: 6},
            wrapperCol: {span: 18},
            idx_: 1,
            rules: {
                formAlias: [
                    {required: true, message: this.i18n('form.formScheme','表单方案','select'), trigger: 'blur'},
                ]
            },
            form:{
                formAlias:"",
                readOnly:false,
                pkField:"",
                fieldMap: "",
                callback:""
            },
            columns: [
                {
                    title: this.i18n('form.targetField','目标字段'),
                    dataIndex: 'destField',
                    scopedSlots: {customRender: 'destField'},
                },
                {
                    title: this.i18n('form.listField','当前列表字段'),
                    dataIndex: 'srcField',
                    scopedSlots: {customRender: 'srcField'}
                }
            ],
            srcFields: [],
            destFields: [],
            selectedRowKeys: [],
            selectedRows: [],
            curRecord: {},
            fieldMap:[]
        }
    },
    created() {

    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"formCellRender",key);
        },
        //获取目标字段
        getDestFields(){
            if(this.form.formAlias){
                var formAlias_ = JSON.parse(this.form.formAlias);
                this.destFields=[];
                FormSolutionApi.getListFields(formAlias_.value).then(res => {
                    for(var i = 0; i < res.data.length; i++){
                        var newRow = {
                            label: res.data[i].comment,
                            value: res.data[i].name,
                            key: res.data[i].fieldName
                        }
                        this.destFields.push(newRow);
                    }
                });
            }
        },
        validate(callback) {
            this.form.fieldMap=JSON.stringify(this.fieldMap);
            this.$refs.form.validate(valid => {
                if (valid) {
                    callback();
                }
            });
        },
        getData(){
            return this.form;
        },
        setData(data,fieldDts,listId){
            if(!data){
                return;
            }
            this.getFields(listId);
            this.form=Object.assign(this.form,data) ;
            this.fieldMap=JSON.parse(this.form.fieldMap);
            this.idx_=this.fieldMap.length+1;
        },
        selectForm(vm){
            var self=this;
            var config = {curVm: self, widthHeight: ['800px', '600px'], data: {multiSelect: false}};
            DialogBox.openSoution(config, function (data) {
                vm.setVal(data.alias, data.name)
                self.form.formAlias=JSON.stringify({text:data.name,value:data.alias})
                self.fieldMap=[];
            })
        },
        onSelectChange(selectedRowKeys, selectedRows){
            this.selectedRowKeys = selectedRowKeys;
            this.selectedRows = selectedRows
        },
        add() {
            this.fieldMap.push({
                destField: "",
                srcField: "",
                idx_: this.idx_++
            })
        },
        remove(){
            this.removeRows(this.fieldMap,this.selectedRowKeys);
        },
        moveUp(){
            this.toUp(this.fieldMap,this.selectedRowKeys)
        },
        moveDown(){
            this.toDown(this.fieldMap,this.selectedRowKeys)
        },
        fieldFocus(record){
            this.curRecord=record;
        },
        fieldChange(value,record){
            if(record["searchField"] && value!=record["searchField"]){
                record["srcField"]=record["searchField"];
            }
        },
        changeDestField(record){
            var destField=record.destField;
            var obj=  this.destFields.filter(item=>{
                return item.key==destField;
            })[0];
            Object.assign(record,obj);

        },
        filterOption(input, option) {
            this.curRecord['srcField']=input;
            this.curRecord['searchField']=input;
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        getFields(listId){
            this.srcFields=[];
            FormBoListApi.reloadColumns(listId).then(res => {
                for(var i = 0; i < res.data.length; i++){
                    var newRow = {
                        label: res.data[i].header,
                        value: res.data[i].field,
                        key: res.data[i].dataType
                    }
                    this.srcFields.push(newRow);
                }
            });
        },
    },
    watch: {
        "form.formAlias":function (val,oldVal){
            this.getDestFields();
        }
    }
}
</script>

<style scoped>

</style>